body {
    // position: fixed;
    // top: 0;
    // left: 0;
    margin: 0;
}
.page {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: scroll;
    background: linear-gradient(180deg, #2c245c 0%, #60549a 100%);

    .content {
        position: absolute;
        bottom: 5%;
        left: 0;
        width: 100%;
        height: 95%;
        background-image: url('../../resource/myFile/backGround.png');
        background-size: 100% 100%;
        .top {
            position: absolute;
            top: 0%;
            left: 0%;
            z-index: 999;
            display: flex;
            justify-content: center;
            width: 100%;
            div {
                z-index: 9999;
                width: 148px;
                height: 48px;
                color: #c0b5ea;
                font-size: 22px;
                line-height: 48px;
                text-align: center;
                background: #4b437d;
                border: 3px solid #0f0600;
                border-radius: 8px;
                box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.2), inset 0 -5px 0 0 #39306e;
            }
        }
        .next {
            position: absolute;
            right: 3%;
            bottom: 4%;
            z-index: 10;
            width: 18.66667vw;
            height: 26.66667vw;
            background-image: url('../../resource/myFile/next.png');
            background-position: 100% 100%;
            background-size: 270px;
        }
        .share_img {
            position: absolute;
            top: 1%;
            right: 4%;
            width: 20px;
            height: 20px;
            background: #e6e3d7;
            border: 2px solid #0f0600;
            border-radius: 10px;
            box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.3), inset 0 -4px 0 0 #a6987c;
            img {
                width: 100%;
                height: 100%;
            }
        }

        .pages {
            width: 100vw;
            // background: #372e69;
            // background: linear-gradient(135deg, #2c245c 0%, #60549a 100%);
            // background-image: url('../../resource/level/background.png');
            // background-size: 100% 100%;
            .box {
                display: flex;
                justify-content: center;
            }
            .top_view {
                width: auto !important;
                height: 40px;
                margin: 0 auto;
                padding-top: 2%;
                color: #fff;
                font-size: 22px;
                line-height: 52px;
                text-shadow: 0 5px 0 rgba(0, 0, 0, 0.3);
            }
            div:nth-child(2) {
                display: flex;
                justify-content: center;
                img {
                    width: 240px;
                    height: 38%;
                    margin-top: 6%;
                }
            }

            .contents {
                width: 240px;
                height: 303px;
                margin: 0 auto;
                margin-top: 2%;
                border: 2px dashed #91908f;
                border-radius: 8px;
                .career {
                    position: relative;
                    width: 100%;
                    height: 17%;
                    margin-top: 4%;
                    .hollow {
                        position: absolute;
                        top: 6%;
                        left: 4%;
                        z-index: 99;
                        width: 20px;
                        height: 20px;
                        font-size: 12px;
                        line-height: 20px;
                        text-align: center;
                        border: 1px solid #0f0600;
                        border-radius: 15px;
                    }
                    .solid {
                        position: absolute;
                        top: 6%;
                        left: 5%;
                        width: 20px;
                        height: 20px;
                        background: #4fdd94;
                        border-radius: 15px;
                    }
                    .title {
                        position: absolute;
                        top: 8%;
                        left: 14%;
                        color: #fff;
                        font-weight: 600;
                        font-size: 12px;
                    }
                    .feature {
                        position: absolute;
                        top: 35%;
                        left: 13%;
                        width: 200px;
                        height: 30px;
                        color: rgba(255, 255, 255, 0.7);
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 15px;
                    }
                }
            }
            div:last-child {
                width: 100vw;
                height: 20px;
            }
        }
    }

    .top_view {
        position: relative;
        z-index: 1;
        width: 80%;
        height: 70vh;
        margin: 57px 40px 0 30px;
        // overflow-x:hidden;
        overflow: scroll;
    }
}
